<template>
  <div class="page">
    <div class="goods_img">
      <img :src="result.product&&result.product.showPic" mode="widthFix">
    </div>
    <div class="goods_base weui-flex">
      <div class="weui-flex__item">
        <div class="goods_base_title">{{result.product&&result.product.spName}}</div>
        <div class="goods_base_price">
          <span class="price_old">¥{{result.product&&result.product.lsdj*0.01||0}}</span>
          <span class="price_now">￥{{result.product&&result.product.xsdj*0.01||0}}</span>

        </div>
      </div>
      <div class="share">
        <button  class="share_button"  id="shareBtn" open-type="share" type="primary">
          <img src="../../../static/images/ic_share.png" mode="widthFix" >
        </button>


      </div>
    </div>
    <div class="weui-cells">
      <div class="weui-cell">
        <div class="weui-cell__bd">产品详情</div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__bd group_content">
          {{result.product&&result.product.spRemark}}
        </div>
      </div>
    </div>
    <div class="weui-cells">
      <div class="weui-cell">
        <div class="weui-cell__bd">用户评价</div>
        <a  @click="goEvaluate" class="weui-cell__ft">全部评论</a>
      </div>
      <template v-if="result.evaluate&&result.evaluate.length">
      <div class="weui-cell" v-for="item in result.evaluate ">
        <div class="weui-cell__bd group_content" >
          <div class="weui-flex review">
            <img class="review_head" :src="item.merchantCard.image" mode="widthFix">
            <div class="weui-flex__item">
              <div class="review_user">
                <span>{{item.merchantCard.username||""}}</span>
                <div class="review_data">{{item.createTimeData}}</div>
              </div>
              <div class="review_star flex">
                综合评分
                <rate :number="item.skills"></rate>
<!--                <template v-for="a in item.skills">-->
<!--                  <img src="../../../static/images/star.png" mode="widthFix">-->
<!--                </template>-->


              </div>
              <div class="review_con">
                {{item.content}}
              </div>
            </div>
          </div>
        </div>
      </div>
      </template>
      <div class="weui-cell" v-else>
        <p  style="display: flex;justify-content: center;width:100%;">
          暂无评论
        </p>

      </div>

    </div>
    <div class="footer weui-flex">
      <div class="homelink">
        <img src="../../../static/images/ic_home.png">
        <p @click="goHome">首页</p>
      </div>
      <div class="cartlink" @click="goCart">
        <span class="weui-badge">{{getCartLen}}</span>
        <img src="../../../static/images/ic_cart.png">
        <p>购物车</p>
      </div>
      <div class="weui-flex__item footer_btn">
       <a  class="footer_btn_alone" @click="addCart()">加入购物车</a>
        <a  @click="payBox()"  class="footer_btn_group">立即购买</a>
      </div>
    </div>
      <mp-modal ref="mpModal" title="提示" content="您未登录,是否登录?" :showCancel="true" @confirm="goLogin" @cancel="handleClose"></mp-modal>
  </div>
</template>

<script>
import rate from '../../components/rate'
import mpModal from 'mpvue-weui/src/modal';
import * as appId from "@/utils/util"
import {mapActions,mapGetters} from "vuex"
export default {
  data () {
    return {
      id:"",
      result:{},
      phone:"",
      userId:"",
      carNums:0,
      arr:[]
    }
  },
   computed:mapGetters([
 //此处的 count 与以下 store.js 文件中 getters 内的 count 相对应
 'getCartLen'
 ]),
  components: {
    rate,
    mpModal
  },
  onLoad(id){
    console.log(id)
    this.id=id.id;
  },
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: `${this.result.product.spName}`,     // 分享出去的标题
      path: "/pages/productdetail/main?id="+this.id,  // 分享之后再点进去的路径，可以带参数
      success: function (res) {
        wx.showToast({
          title: '分享成功',
          icon: 'none',
          duration: 2000
        })
        // 转发成功
      },
      fail: function (res) {
        wx.showToast({
          title: '分享失败',
          icon: 'none',
          duration: 2000
        })
        // 转发失败
      }
    }
  },
  onShow(){
    wx.setNavigationBarTitle({
      title: "产品详情"
    })
    this.arr=[];
     this.carNums=Number(wx.getStorageSync('carNums'))
      this.userInfo =wx.getStorageSync('userInfo')&&JSON.parse(wx.getStorageSync('userInfo'))
       this.phone=this.userInfo.mobileNo;
      this.userId=this.userInfo.baseUserId;
    this.getDetail()
     this.setCartLength({
      	"appid":appId.appId,
         "phone":this.phone,
         "pageNo":"1",
         "pageSize":"99999"
    })
  },
  methods: {
    goEvaluate(){
      let url="/pages/comment/main?id="+this.id;
      wx.navigateTo({ url:url})
    },
    changeDate(str){
      var time = new Date(str);
      return time.getFullYear()+"-"+time.getMonth()+1+"-"+time.getDate();
    },
    // tPay(){
    //   wx.setStorageSync('productDetail',JSON.stringify(this.result))
    //      wx.setStorageSync('isTuangou',1)
    //     wx.navigateTo({ url:"/pages/commit/main"})
    // },
    ...mapActions(['setCartLength']),
    addCart(){
       let that=this;
      this.$http.request({
        method: "post",
        url: "/v1.0/appletOperat/appletAddCar",
        body: {
         	"userId":that.userId,
          "phone":that.phone,
          "productId":that.result.product.id,
          "appid":appId.appId

        }
      }).then((data)=>{
         if(data.code==0){
           this.setCartLength({
             	"appid":appId.appId,
                "phone":that.phone,
                "pageNo":"1",
                "pageSize":"99999"
           })
           // this.carNums+=1
           // wx.setStorageSync('carNums',this.carNums)
            wx.showToast({
            title: '添加成功',
            icon: 'success',
            duration: 2000
          })
        }else{
           wx.showToast({
            title: `${data.message}`,
            icon: 'none',
            duration: 2000
          })
        }
      })
    },
    payBox(){
      wx.setStorageSync('productDetail',JSON.stringify(this.result))
       wx.setStorageSync('payShow',JSON.stringify(this.arr))
          wx.setStorageSync('isTuangou',0)
        wx.navigateTo({ url:"/pages/commit/main"})
    },
     goLogin(){
        let url="/pages/my/main";
        wx.reLaunch({ url:"/pages/my/main"})

            // this.$refs.mpModal.hide();

    },
    handleClose1(){
         this.$refs.mpModal.hide();
    },
    goCart(){

      if(this.userInfo) {
         wx.navigateTo({ url:"/pages/cart/main"})


      }else{
      this.$refs.mpModal.show();
      }
    },
    goHome(){
      let url="/pages/index/index";
      console.log(123)
      // wx.setStorageSync('AppleAssembleList', JSON.stringify(row))
        wx.reLaunch({ url:"/pages/index/main"})
    },
    getDetail(){
      let that=this;
      console.log(123)
      this.$http.request({
        method: "post",
        url: "/v1.0/appletHome/appletProDetail",
        body: {
          "id":that.id,
           "status":"0"
        }
      }).then((data)=>{
        if(data.code==0){
         that.result=data.result;
       //  console.log(that.result.product.spName)
          if(that.result.evaluate.length){
            that.result.evaluate.forEach((a,i)=>{
              a.createTimeData=that.changeDate(a.createTime)
            })
          }
         that.arr=[]
         that.arr.push(that.result.product)
        }else{
          wx.showToast({
            title: `${data.message}`,
            icon: 'none',
            duration: 2000
          })
        }
      })
    }
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
  .share_button{
    border:none;
    background: #fff;
  }
  .share_button::after{
    border:none;
  }
.page{
  padding-bottom: 3.5em;
}
.goods_img img{
  width: 100%;
  display: block;
}
.goods_base{
  background: #fff;
  padding: 0.8em;
}
.goods_base_title{
  font-size: 0.9em;
}
.goods_base .share img{
  width: 1.2em;
}
.goods_base_price .price_now{
  color: #E4393C;
  font-size: 1.1em;
  padding-right: 0.4em;
}
.goods_base_price .price_old{
  color: #999;
  font-size: 0.8em;
  text-decoration: line-through;
}
.footer{
  position: fixed;
  bottom: 0px;
  left: 0px;
  z-index: 9999;
  right: 0px;
  background: #fff;
  padding: 0.6em;
  border-top: 1px #eee solid;
}
.footer .homelink,.footer .cartlink{
  text-align: center;
  font-size: 0.7em;
  width: 4em;
  line-height: 1em;
  color: #999;
  position: relative;
}
.footer .cartlink {
  margin-right: 0.4em;
}
.footer .cartlink .weui-badge{
  position: absolute;
  top: 0px;
  right: 0px;
}
.footer .homelink img,.footer .cartlink img{
  width: 1.6em;
  height: 1.6em;
}
.footer .footer_btn a{
  float: left;
  width: 50%;
  height: 2.4em;
  line-height: 2.4em;
  color: #fff;
  text-align: center;
  font-size: 0.9em;
}
.footer .footer_btn .footer_btn_alone{
  background: #FFBB78;
  border-radius: 1.2em 0px 0px 1.2em;
}
.footer .footer_btn .footer_btn_group{
  background: #FF787E;
  border-radius: 0px 1.2em 1.2em 0px;
}
.review .review_head{
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  margin-right: 0.4em;
}
.review_user .review_data{
  font-size: 0.8em;
  float: right;
  color: #999;
}
.review_star{
  color: #999;
  font-size: 0.9em;
}
.review_star img{
  width: 1em;
}
.review_con{
  color: #666;
  font-size: 0.9em;
  padding: 0.3em 0;
}
</style>
